<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>fileHome</title>

    <script src="./vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="./jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="jumbotron">
        <div class="container text-center">
            <h1>bookHome</h1>
            <p>test It now ...</p>

        </div>
    </div>


    <div class="container-fluid" id="bookApp">



        <button type="button" class="btn btn-success" @click="fnPopAddModal">添加</button>

        <!-- <a class="btn btn-primary" href="/books/page?flag=toAdd" role="button">添加</a> -->
        <a class="btn btn-primary" target="_blank" href="http://192.168.110.199:9000/edoCate/export" role="button">导出</a>
        <a class="btn btn-primary" target="_self" href="http://58.87.110.139:9000/file/timeCard?year=2018&month=12"
            role="button">timecard</a>


        <div class="row">



            <table class="table  table-condensed table-bordered">
                <thead>
                    <tr class="info">
                        <th>#</th>
                        <th>_id</th>
                        <th>sid</th>
                        <th>name</th>
                        <th>价格</th>
                        <th>ctime</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in bookList" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item._id}}</td>
                        <td>{{item.sid}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.ctime | fmtDate}}</td>
                        <td>
                            <button type="button" class="btn btn-info" @click="fnPopUpdateModal(item)">修改</button>

                            <button type="button" class="btn btn-danger" @click="fnDelete(item)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>



        </div>





        <!-- 模态框（Modal） -->
        <div class="modal fade" id="bookModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">{{bookModalTitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">

                            <div class="form-group">
                                <label for="firstname" class="col-sm-4 control-label">_id</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" v-model="bookDataForm._id" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="firstname" class="col-sm-4 control-label">sid</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" v-model="bookDataForm.sid">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="firstname" class="col-sm-4 control-label">name</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="name" v-model="bookDataForm.name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-4 control-label">价格</label>
                                <div class="col-sm-8">


                                    <input type="number" name="price" v-model="bookDataForm.price" class="form-control"
                                        required="required">


                                </div>
                            </div>

                            <!-- <div class="form-group">
                              <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" @click="doSave" class="btn btn-default">保存</button>
                              </div>
                            </div> -->
                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="fnAddOrUpdate">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

    </div>


</body>

</html>

<script>
    var vm = new Vue({
        el: '#bookApp',
        data() {
            return {
                bookModalTitle: '新增',
                bookDataForm: {

                },
                bookList: []
            }

        },
        methods: {

            fnAddOrUpdate: function () {

                // ("新增" == this.bookModalTitle) ? this.fnAdd(): this.fnAddOrUpdate();
                if ("新增" == this.bookModalTitle) {
                    this.fnAdd();
                } else {
                    this.fnUpdate();
                }

            },
            fnPopAddModal: function () {

                this.bookModalTitle = '新增'
                this.bookDataForm = {};
                $('#bookModal').modal('show');
            },
            fnAdd: function () {
                var _self = this;
                $.ajax({
                    type: "post",
                    url: "/books",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(_self.bookDataForm),
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {
                            $('#bookModal').modal('hide');
                            _self.all();
                        }

                    }
                });

            },

            fnPopUpdateModal: function (item) {

                var _self = this;
                this.bookModalTitle = '修改';
                $.ajax({
                    type: "get",
                    url: "/books/" + item._id,
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {
                            _self.bookDataForm = response.dat;
                            console.log(_self.bookDataForm);


                            $('#bookModal').modal('show');
                        }

                    }
                });

            },

            //
            fnUpdate: function () {
                var _self = this;
                $.ajax({
                    type: "post",
                    url: "/books/update/" + _self.bookDataForm._id,
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(_self.bookDataForm),
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {
                            $('#bookModal').modal('hide');
                            _self.all();
                        }

                    }
                });

            },

            fnDelete: function(item){

                var _id = item._id
                var _self = this;
                $.ajax({
                    type: "get",
                    url: "/books/delete/" + _id,
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {
                            _self.all();
                        }

                    }
                });
            },

            all: function () {

                var _self = this;
                $.ajax({
                    type: "get",
                    url: "/books",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {
                            _self.bookList = response.dat;
                        }

                    }
                });
            }
        },
        filters: {
            fmtDate: function (val) {

                function dateFtt(fmt, date) { //author: meizz 

                    if (!date) {
                        return null;
                    }

                    date = new Date(date);
                    var o = {
                        "M+": date.getMonth() + 1, //月份   
                        "d+": date.getDate(), //日   
                        "h+": date.getHours(), //小时   
                        "m+": date.getMinutes(), //分   
                        "s+": date.getSeconds(), //秒   
                        "q+": Math.floor((date.getMonth() + 3) / 3), //季度   
                        "S": date.getMilliseconds() //毫秒   
                    };
                    if (/(y+)/.test(fmt))
                        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(
                                (
                                    "" + o[k]).length)));
                    return fmt;
                };
                return dateFtt("yyyy-MM-dd hh:mm:ss", val);
                //直接调用公共JS里面的时间类处理的办法  
            }
        },

        mounted: function () {

            this.all();
        }
    })
</script>